<!-- 销售单内容 -->
<template>
  <view class="">
    <view class="form-view m-t-30">
      <view class="form-item">
        <view class="flex">
          <view class="label"> 单价 </view>
          <view class="flex flex-asc value p-l-12">
            <input
              type="number"
              @focus="focus"
              v-model="fromData.price"
              @input="inputChange"
              class="input-box"
            />
          </view>
          <!-- <view class="label"
						@click="toRoute('/pages/application/pages/information/product-category/components/pricing-unit')">
						单位
					</view>
					<view class="flex flex-asc p-l-12"
						@click="toRoute('/pages/application/pages/information/product-category/components/pricing-unit')">
						{{ fromData.unitName }}
					</view> -->
        </view>
      </view>
      <view
        class="form-item"
        v-if="
          likeDataList[0].check == false && likeDataList[1].check == false
            ? false
            : true
        "
      >
        <view class="flex" style="flex: 1" v-if="likeDataList[0].check">
          <view class="label c-blue" @click="getListOptionsPageBySpuId()">
            幅宽
          </view>
          <view class="value flex flex-asc p-l-12">
            <input
              type="text"
              @focus="focus"
              v-model="fromData.widthValue"
              class="input-box"
            />
          </view>
        </view>
        <view class="flex" style="flex: 1" v-if="likeDataList[0].check">
          <view class="label c-blue" @click="getListOptionsPageBySpuId()">
            克重
          </view>
          <view class="value flex flex-asc p-l-12">
            <input
              type="text"
              @focus="focus"
              v-model="fromData.gramWeightValue"
              class="input-box"
            />
          </view>
        </view>
        <view class="flex" style="flex: 1.5" v-if="likeDataList[1].check">
          <view class="label"> 规格 </view>
          <view class="value flex flex-asc p-l-12">
            <input
              type="text"
              @focus="focus"
              v-model="fromData.spec"
              class="input-box"
            />
          </view>
        </view>
      </view>
      <view
        class="form-item"
        v-if="
          likeDataList[2].check == false && likeDataList[3].check == false
            ? false
            : true
        "
      >
        <view class="flex" style="flex: 2" v-if="likeDataList[2].check">
          <view class="label"> 缸号 </view>
          <view class="value flex flex-asc p-l-12">
            <input
              type="text"
              @focus="focus"
              v-model="fromData.vatNo"
              class="input-box"
            />
          </view>
        </view>
        <!-- <view class="flex" style="flex:1;"></view> -->
        <view class="flex" style="flex: 1.5" v-if="likeDataList[3].check">
          <view class="label"> 批号 </view>
          <view class="value flex flex-asc p-l-12">
            <input
              type="text"
              @focus="focus"
              v-model="fromData.batchNumber"
              class="input-box"
            />
          </view>
        </view>
      </view>
      <view class="form-item" v-if="likeDataList[4].check">
        <view class="flex" style="flex: 2">
          <view class="label"> 辅编号 </view>
          <view class="value flex flex-asc p-l-12">
            <input
              type="text"
              @focus="focus"
              v-model="fromData.auxiliaryCode"
              class="input-box"
            />
          </view>
        </view>
        <view class="flex" style="flex: 1.5">
          <view class="label"> 辅名称 </view>
          <view class="value flex flex-asc p-l-12">
            <input
              type="text"
              @focus="focus"
              v-model="fromData.auxiliaryName"
              class="input-box"
            />
          </view>
        </view>
      </view>
      <view class="form-item">
        <view class="flex">
          <view class="label"> 备注 </view>
          <view class="flex flex-asc value p-l-12">
            <input
              type="number"
              @focus="focus"
              v-model="fromData.remarks"
              class="input-box"
            />
          </view>
        </view>
      </view>
    </view>
    <view class="ul-view">
      <view class="li-view" @click="openCxCustomKeyboard()">
        <text v-if="!fromData.spaceDiffTypeName || !fromData.spaceDiffValue">
          空差
        </text>
        <text v-else>
          {{ fromData.spaceDiffTypeName }}{{ fromData.spaceDiffValue }}
        </text>
      </view>
      <view class="bor back-4d" @click="clickView">细码数</view>
    </view>
    <view style="width: 90%; margin: auto">
      <cxFineCode
        @closeOtherKeyboard="closeOtherKeyboard"
        ref="cxFineCode"
        @confirm="fineCodeConfirm"
        @delCloth="fineCodeDelCloth"
        :valueArray="valueArray"
        @keyFun="cxFineCodeKeyFun"
      ></cxFineCode>
    </view>
    <!-- 空差 -->
    <cxCustomKeyboard
    
    ref="cxCustomKeyboard"
      :keyValue="keyValue"
      :type="keyboardType"
      @keyFun="keyFun"
      v-bind:visible="visible"
      @clickGap="clickGap"
      @delectFun="delectFun"
      @close="close"
      @confirm="confirmKeyboard"
      @delCloth="confirmKeyboard"
      v-on:update:visible="handleVisibleUpdate"
    >
    </cxCustomKeyboard>
  </view>
</template>

<script>
import cxCustomKeyboard from "@/components/cx-custom-keyboard/cx-custom-keyboard.vue";
import cxFineCode from "@/components/cx-fine-code/cx-fine-code.vue";
export default {
  name: "",
  data() {
    return {
      visible: false,
      codeVisible: true,
      keyValue: [],
      valueArray: [],
      keyboardType: 0,
      fromData: {
        price: 0, // 单价
        widthValue: 0, // 幅宽
        gramWeightValue: 0, // 克重
        spec: "", //规格
        vatNo: "", // 缸号
        positionId: "", //仓位 id
        positionName: "", //仓位 Name
        snVoList: [], // 细码 匹数:piecesCount: 1,数量:quantity: "1"
        unitName: "米", //单位
        unitId: "1597506549310423041", //单位id
        spaceDiffTypeName: "", //模式 name
        spaceDiffType: 0, // 模式id
        spaceDiffValue: "", // 空差
        batchNumber: "", //批号
        auxiliaryCode: "", // 辅助编号
        auxiliaryName: "", // 辅助名称
        remarks: "", //备注
      },
      likeDataList: [
        { label: "宽幅/克重", check: true },
        { label: "规格", check: true },
        { label: "缸号", check: true },
        { label: "批号", check: true },
        { label: "辅编号/名称", check: true },
      ],
      cxFineCodekeyValue:[]
    };
  },
  props: {
    snVoList: {
      type: Array,
      default: [],
    },
    salesData: {
      type: Object,
      default: {},
    },
    likeList: {
      type: Array,
      default: [
        { label: "宽幅/克重", check: true },
        { label: "规格", check: true },
        { label: "缸号", check: true },
        { label: "批号", check: true },
        { label: "辅编号/名称", check: true },
      ],
    },
  },
  components: {
    cxCustomKeyboard,
    cxFineCode,
  },
  mounted() {
    this.fromData = this.salesData;
    this.likeDataList = this.likeList;
    for (let i = 0; i < this.fromData.snVoList.length; i++) {
      this.valueArray.push({
        value: this.fromData.snVoList[i].quantity,
        isActive: false,
      });
    }
  },
  methods: {
    cxFineCodeKeyFun(arr){
      this.cxFineCodekeyValue = arr
    },
    getListOptionsPageBySpuId() {
      this.$emit("getListOptionsPageBySpuId");
    },
		clickView(){
			this.$refs.cxFineCode.clickView();
		},
    //输入框聚焦时触发
    focus() {
      this.visible = false;
      this.$refs.cxFineCode.close();
    },
    closeOtherKeyboard() {
      this.visible = false;
    },
    openCxCustomKeyboard() {
      this.$refs.cxFineCode.confirm()
      this.$refs.cxFineCode.close()
      this.fineCodeConfirm(this.cxFineCodekeyValue)
      this.visible = true;
      if (this.fromData.spaceDiffValue) {
        this.keyValue = this.fromData.spaceDiffValue.split(",");
      } else {
        this.keyValue = [];
      }
    },
    fineCodeDelCloth(item) {
      this.fromData.snVoList = [];
      item.forEach((e, index) => {
        let data = { piecesCount: index, quantity: e.value };
        this.fromData.snVoList.push(data);
      });
      this.$emit("delCloth");
    },
    setPricingUnit(data) {
      this.fromData.unitName = data.label;
      this.fromData.unitId = data.value;
    },
    toRoute(item) {
      this.focus();
      this.$Router.push({
        path: item,
      });
    },
    inputChange(item) {
      this.$emit("inputChange", item.detail.value);
    },
    fineCodeConfirm(item) {
      this.fromData.snVoList = [];
      item.forEach((e, index) => {
        let data = { piecesCount: index, quantity: e.value };
        this.fromData.snVoList.push(data);
      });
      this.$emit("confirm");
    },
    delectFun(item) {
      this.fromData.spaceDiffValue = item.join("");
    },
    keyFun(item) {
      if (!this.fromData.spaceDiffValue) {
        this.fromData.spaceDiffValue = "";
      }
      this.fromData.spaceDiffValue = this.fromData.spaceDiffValue + item;
    },
    // 点击取消按钮修改控制组件显隐的值
    handleVisibleUpdate(newValue) {
      this.visible = newValue;
    },
    // 点击取消按钮
    close() {
      console.log("close");
    },
    // 点击确认按钮
    confirmKeyboard(num) {
      this.visible = false;
      this.$refs.cxCustomKeyboard.close();
      this.$emit("salesOrderConfirm");
    },
    // 选择空差
    clickGap(item) {
      this.fromData.spaceDiffTypeName = item.label;
      this.fromData.spaceDiffType = item.value;
    },
  },
};
</script>

<style lang="scss" scoped>
  .bor {
    width: 105rpx;
    height: 60rpx;
    border: 1px solid #cdcdcd;
    border-radius: 10rpx;
    text-align: center;
    line-height: 60rpx;
    overflow-x: hidden;
    margin: 15rpx 15rpx 0;
  }

  .back-4d {
    background: #4da9ed;
    color: #fff;
    padding: 0 10rpx;
    font-size: 28rpx;
  }
.form-view {
  background: #fff;

  .form-item {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    // font-size: 18rpx;
    border-bottom: 1rpx solid #eee;
    color: #7e7e7e;

    .label {
      min-width: 120rpx;
      text-align: right;
      // padding-left: 94rpx;
      // color: #7e7e7e;
      // font-size: 32rpx;
    }

    .value {
      flex: 1;

      .input-box {
        // font-size: 24rpx;
      }

      .set {
        color: #409eff;
        text-decoration: underline;
      }
    }
  }
}

.ul-view {
  display: flex;
  padding: 20rpx 40rpx;

  .li-view {
    width: 16%;
    height: 30px;
    padding: 20rpx 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 14rpx;
    border: 1rpx dotted #ddd;
    border-radius: 10rpx;
    color: #999;
    font-size: 28rpx;
    overflow-x: scroll;
  }
}
</style>